.MySurfacePlotTop {
  height: 40vh;
  background-image: url("../../assets/img/17773824-af49-4c92-9531-1315aefdac05.jpg");
  background-size: 100% 200%;
  background-position: 80%;
  background-repeat: no-repeat;
  position: relative;


  .titleStyle {
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(232, 232, 232, 0.5);
    border-radius: 10px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-align: center;

    .BlogText {
      line-height: 2rem;

      p {
        margin: 0;
        padding: 0;
      }

      .BlogTitle {
        margin-top: 10px;
        font-size: 1.5rem;
        font-weight: 500;
      }

      .blogCoverTitle {
        font-size: 0.8rem;
        padding: 0 10px;
      }
    }

    .BlogMessage {
      display: flex;
      justify-content: center;
      font-size: 0.6rem;
      align-items: self-end;
      margin-top: 0.5rem;

      div {
        margin: 0 5px 0 5px;
        padding: 0 10px 0 10px;
        line-height: 30px;
      }
    }
  }
}
